<!DOCTYPE html>
<html lang="en" dir="ltr">

<head>
  <meta charset="UTF-8">
  <title>Reorder - Interactive</title>
  <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no">
  <link href="../../../../../css/core.css" rel="stylesheet">
  <link href="../../../../../scripts/testing/styles.css" rel="stylesheet">
  <script src="../../../../../scripts/testing/scripts.js"></script>
  <script nomodule src="../../../../../dist/ionic/ionic.js"></script>
  <script type="module" src="../../../../../dist/ionic/ionic.esm.js"></script></head>

<body>
  <ion-list><ion-reorder-group disabled="false"></ion-reorder-group></ion-list>

  <script>
    class TestReorderListShadowDom extends HTMLElement {
      constructor() {
        super();
        const shadow = this.attachShadow({mode: 'open'});
        const wrapper = document.createElement('div');
        wrapper.innerHTML = `<ion-list><ion-reorder-group disabled="false"></ion-reorder-group></ion-list>`;
        shadow.appendChild(wrapper);
      }
    }

    customElements.define('test-reorder-list-shadow-dom', TestReorderListShadowDom);

    function addReorderItem(list) {
      const reorderItem = document.createElement('ion-reorder');
      reorderItem.innerHTML = `<ion-item>
          <ion-label>
            <h2>Item ${list.childElementCount}</h2>
          </ion-label>
      </ion-item>`;

      reorderItem.id = `item-${list.childElementCount}`;

      list.appendChild(reorderItem);
    }

    const testShadowDomEl = document.createElement('test-reorder-list-shadow-dom');
    document.body.appendChild(testShadowDomEl);

    let lists = Array.from(document.getElementsByTagName('ion-reorder-group'));
    lists.push(testShadowDomEl.shadowRoot.querySelector('ion-reorder-group'));

    for (var i = 0; i < lists.length; i++) {
      lists[i].addEventListener('ionItemReorder', ({detail}) => detail.complete(true));
      for (var j = 0; j < 3; j++) addReorderItem(lists[i]);
    }
  </script>
</body>
</html>
